<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息收集表</title>
    <style>
        input {
          width: 150px; /* 这里可以设置你需要的输入框宽度 */
          padding: 3px; /* 这里可以设置你需要的输入框内边距 */
          margin: 10px; /* 这里可以设置你需要的输入框外边距 */
        }

        .code-preview {
    position: relative;
    display: inline-block;
    font-size: 18px;
    color: rgb(243, 4, 4);

  }

  .code-preview .code {
    display: none;
    position: absolute;
    top: 100%;
    left: 200px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 1000;
  }

  .code-preview:hover .code {
    display: block;
  }
        </style>
</head>
<body>
    <!-- 作业展示部分 -->
<div class="code-preview">
    <pre>关键代码</pre>
    <div class="code">
      &lt;
      <pre>
        &ltstyle>
            input {
              width: 150px; /* 这里可以设置你需要的输入框宽度 */
              padding: 3px; /* 这里可以设置你需要的输入框内边距 */
              margin: 10px; /* 这里可以设置你需要的输入框外边距 */
            }
    
            .code-preview {
        position: relative;
        display: inline-block;
        font-size: 48px;
      }
    
      .code-preview .code {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 5px;
        z-index: 1000;
      }
    
      .code-preview:hover .code {
        display: block;
      }
            &lt/style>
    &lt/head>
    &ltbody>
        &lt!-- 作业展示部分 -->
    &ltdiv class="code-preview">
        &ltpre>关键代码&lt/pre>
        &ltdiv class="code">
          &lt;&ltpre>&lt关键代码&lt&lt/pre>&gt;
        &lt/div>
      &lt/div>
      
        &ltform action="action.html">
            &ltlabel for="xinming">
                姓名：&ltinput type="text" name="cname" placeholder="请输入姓名" id="xinming"> &ltbr>
            &lt/label>
            手机：&ltinput type="tel" name="mphone" id="">&ltbr>
            出生年月日：&ltinput type="date" name="birthday" id="">&ltbr>
            邮箱：&ltinput type="email" name="email" id="">&ltbr>
            性别：
            &ltlabel for="male">
                &ltinput type="radio" name="gender" id="male">男
             &lt/label>
             &ltlabel for="female">
                &ltinput type="radio" name="gender" id="female">女
            &lt/label>
            &ltbr>
            婚姻状态：&ltselect name="hstate" id="">
                &ltoption value="未婚">未婚&lt/option>
                &ltoption value="已婚">已婚&lt/option>
                &ltoption value="丧偶">丧偶&lt/option>
                &ltoption value="离婚">离婚&lt/option>
            &lt/select>
            &ltbr>
            爱好：
            &ltlabel for="kanshu">
                &ltinput type="checkbox" name="kanshu" id="kanshu" checked>看书
            &lt/label>
            &ltlabel for="daqiu">
                &ltinput type="checkbox" name="daqiu" id="daqiu">打球
            &lt/label>
            &ltlabel for="paobu">
                &ltinput type="checkbox" name="paobu" id="paobu">跑步
            &lt/label>
            &ltlabel for="youxi">
                &ltinput type="checkbox" name="youxi" id="youxi">游戏
            &lt/label>
            &ltlabel for="kandianying">
                &ltinput type="checkbox" name="kandianying" id="kandianying">看电影
            &lt/label>
            
            &ltbr>
            &ltinput type="submit" value="提交">
            &ltinput type="reset" value="重置">
    
        &lt/form>
    </pre>
    &gt;
    
    </div>
  </div>

    <form action="action.html">
        <label for="xinming">
            姓名：<input type="text" name="cname" placeholder="请输入姓名" id="xinming"> <br>
        </label>
        手机：<input type="tel" name="mphone" id=""><br>
        出生年月日：<input type="date" name="birthday" id=""><br>
        邮箱：<input type="email" name="email" id=""><br>
        性别：
        <label for="male">
            <input type="radio" name="gender" id="male">男
         </label>
         <label for="female">
            <input type="radio" name="gender" id="female">女
        </label>
        <br>
        婚姻状态：<select name="hstate" id="">
            <option value="未婚">未婚</option>
            <option value="已婚">已婚</option>
            <option value="丧偶">丧偶</option>
            <option value="离婚">离婚</option>
        </select>
        <br>
        爱好：
        <label for="kanshu">
            <input type="checkbox" name="kanshu" id="kanshu" checked>看书
        </label>
        <label for="daqiu">
            <input type="checkbox" name="daqiu" id="daqiu">打球
        </label>
        <label for="paobu">
            <input type="checkbox" name="paobu" id="paobu">跑步
        </label>
        <label for="youxi">
            <input type="checkbox" name="youxi" id="youxi">游戏
        </label>
        <label for="kandianying">
            <input type="checkbox" name="kandianying" id="kandianying">看电影
        </label>
        
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">

    </form>
</body>
</html>